<template>
  	<div class="personalCenter">
		<div class="userInfo">
			<div class="avatar">
				<img v-if="userInfo" :src="userInfo.user.headimgurl" alt="" srcset="">
			</div>	
			<div class="uid" v-if="userInfo">
				UID:{{userInfo.id}}
			</div>
		</div>
		<div class="center">
			<div class="card" @click="vipCard">
				<p>
					<span @click.stop="exchangeClick">兑换</span>
				</p>
				<h1>贵宾卡</h1>
				<h4>NO.dccj</h4>
			</div>
		</div>
		<div class="btm">
			<van-cell title="车辆信息" is-link url="/mycar" />
			<van-cell title="帮助中心" is-link url="/helpCenter" />
			<van-cell title="客服电话 0316-8961818" is-link url="tel:0316-8961818" />
		</div>
		<!-- 底 导航 -->
		<footer class="flex-row-wrap">
			<div class="item" @click="navBottom(2)">
        		<div class="img" :class="active==0?'active':''"></div>
        		<p :class="active==0?'active':''">首页</p>
      		</div>
			<div class="item" @click="navBottom(1)">
				<div class="img" :class="active==1?'active':''"></div>
				<p :class="active==1?'active':''">订单</p>
			</div>
			<div class="item" @click="navBottom(3)">
				<div class="img" :class="active==2?'active':''"></div>
				<p :class="active==2?'active':''">我的</p>
			</div>
		</footer>
		<!-- 贵宾卡兑换弹窗 -->
		<van-popup v-model="show" closeable @close="closeExchange" >
			<div class="exchange">
				<van-field v-model="exchange" clearable />
				<van-button :loading="loading" @click="submit" type="primary">兑换</van-button>
			</div>
		</van-popup>
  	</div>
</template>

<script>
	import { setLocal, getLocal, delLocal } from '@/utils/storage'
	export default {
		data(){
			return{
				userInfo:[],
				active:2,
				show:false,
				exchange:null,
				loading:false,
			}
		},
		created(){
			this.userInfo = JSON.parse(getLocal('userInfo')) 
			console.log('this.userInfo---------',this.userInfo)
			if (this.userInfo) {
				if (!this.userInfo.id) {
					this.$toast('您还未登录~ ')
					this.$router.push('/')
				}
			}
		},
		methods:{
			//底部导航的路由
			navBottom(type) {
				if (type == 1) {
					this.$router.push('/order')
				} else if (type == 3) {
					//this.$router.push('/personalCenter')
				} else {
					this.$router.push('/')
				}
			},
			//点击兑换按钮
			exchangeClick(){
				this.show=true
			},
			//关闭兑换弹窗时
			closeExchange(){
				this.exchange = null
			},
			//点击贵宾卡
			vipCard(){
				this.$router.push('/vip')
			},
			/**
			 * 兑换贵宾卡
			 */
			async submit(){
				if (!this.exchange) {
					this.$toast('请填写兑换码')
				}else{
					this.loading = true
					let res = await this.$api.addUserCoupon({
						userId:this.userInfo.id,
						couponCode:this.exchange
					})
					console.log('兑换码res-------',res)
					if (res) {
						if (res.status === 200) {
							this.$toast('兑换成功')
							this.exchange = null
							this.show = false
							this.$router.push('/vip')
						}
					}
					this.loading = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.personalCenter {
  		.userInfo {
			width: 90%;
			margin: 0 auto;
			padding: 1rem 0 0.5rem 0;
			display: flex;
			align-items: center;
			.avatar{
				width: 1.5rem;
				height: 1.5rem;
				border-radius: 50%;
				border: 1px solid #999;
				overflow: hidden;
			}
			.uid{
				margin-left: 0.4rem;
				font-size: 0.5rem;
			}
		}
		.center{
			width: 90%;
			margin: 0 auto;
			background-color: #efefef;
			background: url(../../assets/img/card.png)center/cover no-repeat;
			padding: 0.3rem 0.6rem;
			box-sizing: border-box;
			border-radius: 0.1rem;
			.card{
				color:#fff;
				p{
					font-size: 0.4rem;
					text-align: right;
				}
				h1{
					font-size: 0.8rem;
					box-sizing: border-box;
					padding-left: 26%;
					margin-top: 0.4rem;
					margin-bottom: 1rem;
					position: relative;
					
				}
				h1::after{
					content: 'VIP';
					font-size: 0.5rem;
					position: absolute;
					right: 30%;
					top:0.6rem;
					font-style:italic;
				}
				h4{
					font-size: 0.4rem;
					text-align: right;
				}

			}
		}
		.btm{
			margin-top: 0.5rem;
		}
		footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1.30rem;
			display: flex;
			background-color: #fff;
			border-top: 1px solid #efefef;
    		.item{
				width: calc(100% / 3);
				text-align: center;
				font-size: 0.26rem;
				font-weight:500;
				color:#666666;
				font-family:PingFangSC-Medium,PingFang SC;
				line-height:0.37rem;
				margin-top: 0.16rem;
				.img{
					width: 0.58rem;
					height: 0.58rem;
					margin: 0 auto;
					background: url(../../assets/img/icon/index.png)center/cover no-repeat;
				}
				.img.active{
					background: url(../../assets/img/icon/index_active.png)center/cover no-repeat;
				}
				p.active{
					color:#51B99B
				}
    		}
    		.item:nth-child(2){
				.img{
					background: url(../../assets/img/icon/order.png)center/cover no-repeat;
				}
				.img.active{
					background: url(../../assets/img/icon/order_active.png)center/cover no-repeat;
				}
    		}
			.item:nth-child(3){
				.img{
					background: url(../../assets/img/icon/user.png)center/cover no-repeat;
				}
				.img.active{
					background: url(../../assets/img/icon/user_active.png)center/cover no-repeat;
				}
			}
  		}
		.exchange{
			text-align: center;
			padding: 0.8rem 0.3rem;
			.van-cell{
				width: 8rem;
				border: 1px solid #333;
				margin-top: 0.8rem;
			}
			button{
				width: 4rem;
				margin-top: 0.4rem;
			}
		}
	}
</style>>

